$(function() {
    // 鼠标经过
    $(".nav>li").mouseover(function() {
        // $(this) jQuery 当前元素  this不要加引号
        // show() 显示元素  hide() 隐藏元素
        $(this).children("ul").show();
    });
    // 鼠标离开
    $(".nav>li").mouseout(function() {
        $(this).children("ul").hide();
    });
    let put = document.querySelector('#put')
    put.style.outlineColor = 'transparent';

    /* 获取轮播区块 */
    let oSliderBox = document.getElementById('sliderBox1')
    /* 获取ul li */
    let oSliderUl = document.querySelector('.sliderUl');
    let aSliderList = oSliderUl.children;
    /* 获取轮播区块宽度 */
    let perWidth = aSliderList[0].offsetWidth;
    /* 设置ul的宽度 */
    oSliderUl.style.width = aSliderList.length * perWidth + 'px';
    /* 加定时器 */
    let i = 0;

    /* 做一个封装 */
    function move(){
        i++;
         //临界值 避免出现空白
        if(i == aSliderList.length){
        oSliderUl.style.left = 0;
        i = 1;
        }
        /* 右箭头临界值 */
        if(i == -1){
            oSliderUl.style.left = -(aSliderList.length -1) * perWidth + 'px';
            i = aSliderList.length - 2;
        };

        /* 小圆点点亮 */
        /* 避免都点亮，先清除后加 */
        for(let j = 0; j < aCircleList.length; j++) {
        aCircleList[j].className = "";
        };
        /*出现最后一张图 */
        if(i == aSliderList.length - 1){
        aCircleList[0].className = 'hover';
        }else{
        aCircleList[i].className='hover';
        };

        /* 往左走是负 */
        startMove(oSliderUl,{left: -perWidth* i});
        };   
        
    let timer = setInterval(function() {
        move();
    },3000);

    /* 获取箭头 */
    let oBtn = document.querySelector('.btns');
    /* 给获取到的左箭头取个名字 */
    let lArrow = oBtn.children[0];
    /* 右箭头 */
    let rArrow = oBtn.children[1];
    /* 添加左箭头单击事件 */
    lArrow.onclick = function() {
    /* 不能用i-- 应为上面是i++会抵消 */
    i -= 2;
    move();
    };
    /* 右箭头事件  依然还要临界值*/
    rArrow.onclick = function() {
    move();
    };

     /* 获取小圆点 */
    let oCircle = document.querySelector('.circles');
    let aCircleList = oCircle.children;
    for(let j = 0; j < aCircleList.length; j++){
    aCircleList[j].onmouseover = function() {
    i = j - 1;
    move();
        };
    };
            
    /* 清除和开启定时器 */
    /* 清除 */
    oSliderBox.onmouseover = function() {
    clearInterval(timer);
    };
    /* 开启 */
    oSliderBox.onmouseout = function() {
    timer = setInterval(function() {
        move();
    }, 3000);
    };

    /* 下边轮播 */
    let oSliderBox1 = document.getElementById('sliderBox2');
    let oSliderUl1 = document.querySelector('.sliderUl1');
    let aSliderList1 = oSliderUl1.children;
    /* 获取轮播区块宽度 */
    let perWidth1 = aSliderList1[0].offsetWidth;
    /* 设置ul的宽度 */
    oSliderUl1.style.width = aSliderList1.length * perWidth1 + 'px';
    /* 定时器 */
    let v = 0;
    function autoplay(){
        v++;
        /* 临界值，避免出现空白 */
        /* 右边临界值 */
        if(v == aSliderList1.length){
            oSliderUl1.style.left = 0;
            v = 1;
        } 
        /* 左边临界值 */
        if(v == -1){
            oSliderUl1.style.left = -(aSliderList1.length-1)* perWidth1 + "px";
            v = aSliderList1.length - 2;
        }

        startMove(oSliderUl1,{left:-perWidth1 * v })
    }
    /* 定时器 */
    let timer1 = setInterval(function() {
        autoplay();
    },3500);
    /* 获取箭头 */
    let oBtn1 = document.querySelector('.btns1');
    /* 左箭头 */
    let lArrow1 = oBtn1.children[0];
    /* 右箭头 */
    let rArrow1 = oBtn1.children[1];
    lArrow1.onclick = function() {
        v -= 2;
        autoplay();
    }
    rArrow1.onclick = function() {
        autoplay();
    }
    /* 清除和开启定时器 */
    /* 清除 */
        oSliderBox1.onmouseover = function() {
        clearInterval(timer1);
        };
        /* 开启 */
        oSliderBox1.onmouseout = function() {
        timer1 = setInterval(function() {
            autoplay();
        }, 3500);
        };
        
        
});
    